<template>
	<view class="content">
		<view class="userInfoBox">
			<view class="Service">
				<view class="Number">{{PLCFNum.post}}</view>
				<view class="Word">发布</view>
				<view class="Number">{{PLCFNum.like}}</view>
				<view class="Word">喜欢</view>
				<view class="Number">{{PLCFNum.subscribes}}</view>
				<view class="Word">关注</view>
				<view class="Number">{{PLCFNum.fans}}</view>
				<view class="Word">粉丝</view>
			</view>
			<view class="Descripton">{{ otherInfo.description }}</view>

			<view class="Registration">注册时间：{{ otherInfo.registration }}</view>

			<view class="Latest">最后登录：{{ otherInfo.latest }}</view>

			<view class="Email">邮箱：{{ otherInfo.email }}</view>

			<view class="Update" v-if="userInfo.uid==propUid">
				<button type="primary" size="default" @click="updateInfo">编辑资料</button>
			</view>
		</view>
		<view class="user_nav">
			<view class="nav_header">
				<ul>
					<li v-for="(item,index) in navList" :key="item.id" :class="{active: index==checked}"
						@click="changeActive(index)">{{item.title}}
					</li>
				</ul>
			</view>
			<view class="msgBox_myMsgsList" style="padding-top: 5px;" v-show="checked==0">
				<messagesBox v-if="publishMsgsList.length!=0" :messagesList="publishMsgsList"></messagesBox>
				<view class="result_no" v-else>
					{{tipMsg}}
				</view>
			</view>
			<view class="msgBox_myLikeMsgs" style="padding-top: 5px;" v-show="checked==1">
				<messagesBox v-if="likeMsgsList.length!=0" :messagesList="likeMsgsList"></messagesBox>
				<view class="result_no" v-else>
					{{tipMsg}}
				</view>
			</view>
			<view class="msgBox_concern" v-show="checked==2">
				<simpleUserInfo v-if="concernList.length!=0" :simpleInfoList="concernList" :checked="checked">
				</simpleUserInfo>
				<view class="result_no" v-else>
					{{tipMsg}}
				</view>
			</view>
			<view class="msgBox_fans" v-show="checked==3">
				<simpleUserInfo v-if="fansList.length!=0" :simpleInfoList="fansList" :checked="checked">
				</simpleUserInfo>
				<view class="result_no" v-else>
					{{tipMsg}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "othersInfo",
		props: {
			propUid: {
				type: String,
				default: ''
			},
			otherInfo: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				navList: [{
						title: '发布',
						id: 0
					},
					{
						title: '喜欢',
						id: 1
					}, {
						title: '关注',
						id: 2
					}, {
						title: '粉丝',
						id: 3
					},
				],
				checked: 0,
				publishMsgsList: [],
				likeMsgsList: [],
				isloading: false,
				publishMsgDate: '2099-12-31',
				publishMsgMid: '',
				likeMsgDate: '2099-12-31',
				likeMsgMid: '',
				concernList: [],
				fansList: [],
				PLCFNum: {},
				tipMsg: ''
			};
		},
		computed: {
			...mapState('my_Info', ['userInfo'])
		},
		created() {

		},
		mounted() {
			this.getPublicMsgsList()
			this.getPLCFNum()
		},
		methods: {
			changeActive(index) {
				this.checked = index
				switch (index) {
					case 0:
						break
					case 1:
						if (this.likeMsgsList.length == 0) {
							this.getLikeMsgsList()
						}
						break
					case 2:
						if (this.concernList.length == 0) {
							this.getConcernList()
						}
						break
					case 3:
						if (this.fansList.length == 0) {
							this.getFansList()
						}
						break

				}
			},
			updateInfo() {
				uni.navigateTo({
					url: '/subpkg/updateInfo/updateInfo'
				})
			},


			//下拉刷新
			refresh() {
				switch (this.checked) {
					case 0:
						this.publishMsgsList = []
						this.publishMsgDate = '2022-12-31'
						this.publishMsgMid = ''
						this.getPublicMsgsList(() => uni.stopPullDownRefresh())
						this.getPLCFNum(() => uni.stopPullDownRefresh())
						break
					case 1:
						this.likeMsgsList = []
						this.likeMsgDate = '2022-12-31'
						this.likeMsgMid = ''
						this.getLikeMsgsList(() => uni.stopPullDownRefresh())
						this.getPLCFNum(() => uni.stopPullDownRefresh())

						break
					case 2:
						this.concernList = []
						this.getConcernList(() => uni.stopPullDownRefresh())
						this.getPLCFNum(() => uni.stopPullDownRefresh())

						break
					case 3:
						this.fansList.length = []
						this.getFansList(() => uni.stopPullDownRefresh())
						this.getPLCFNum(() => uni.stopPullDownRefresh())
						break

				}
			},

			// 得到ta的发布
			async getPublicMsgsList(cb) {
				this.isloading = true

				if (this.publishMsgsList.length != 0 && this.publishMsgsList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listWhoseMessages/' + this.userInfo.uid + '/' + this.propUid +
					'?date=' + this.publishMsgDate + '&mid=' + this.publishMsgMid
				)
				cb && cb()

				this.isloading = false

				if (res.code == 2000) {
					if (res.data.length != 0) {
						this.publishMsgsList = [...this.publishMsgsList, ...res.data]
						this.publishMsgDate = res.data[res.data.length - 1].date
						this.publishMsgMid = res.data[res.data.length - 1].mid
					} else {
						this.tipMsg = '暂无发布哦'
					}

				} else {
					uni.showToast({
						title: '数据加载出错',
						duration: 1500,
						icon: 'error'
					})
				}
			},
			// 返回ta的喜欢
			async getLikeMsgsList(cb) {


				if (this.likeMsgsList.length != 0 && this.likeMsgsList.length % 10 != 0) {
					uni.showToast({
						title: '没有更多数据数据',
						duration: 1500,
						icon: 'none'
					})
					return
				}

				let {
					data: res
				} = await uni.$http.get('/messages/listWhoseLike/' + this.userInfo.uid + '/' + this.propUid +
					'?date=' + this.likeMsgDate + '&mid=' + this.likeMsgMid)

				cb && cb()

				if (res.code == 2000) {
					if (res.data.length != 0) {
						this.likeMsgsList = [...this.likeMsgsList, ...res.data]
						this.likeMsgDate = res.data[res.data.length - 1].date
						this.likeMsgMid = res.data[res.data.length - 1].mid
					} else {
						this.tipMsg = '暂无喜欢哦'
					}
				} else {
					uni.showToast({
						title: '数据加载出错',
						duration: 1500,
						icon: 'error'
					})
				}
			},

			// 返回ta的关注
			async getConcernList(cb) {
				let {
					data: res
				} = await uni.$http.get('/users/listSubscribes/' + this.userInfo.uid + '/' + this.propUid)

				cb && cb()

				if (res.code == 2000) {
					if (res.data.length != 0) {
						this.concernList = res.data
					} else {
						this.tipMsg = '还没有关注的人哦'
					}
				} else {
					uni.showToast({
						title: '数据加载出错!',
						duration: 1500,
						icon: 'error'
					})
				}
			},
			// 返回ta的粉丝
			async getFansList(cb) {
				let {
					data: res
				} = await uni.$http.get('/users/listFans/' + this.userInfo.uid + '/' + this.propUid)

				cb && cb()
				if (res.code == 2000) {
					if (res.data.length != 0) {
						this.fansList = res.data
					} else {
						this.tipMsg = '还没有粉丝哦'
					}
				} else {
					uni.showToast({
						title: '数据加载出错!',
						duration: 1500,
						icon: 'error'
					})
				}
			},

			//返回数量
			async getPLCFNum(cb) {
				let {
					data: res
				} = await uni.$http.get('/users/getFour/' + this.propUid)
				cb && cb()
				if (res.code == 2000) {
					this.PLCFNum = res.data
				}
			}

		}


	}
</script>

<style lang="less">
	.content {
		// padding: 10px;

		.userInfoBox {

			margin: 0 10px;
			padding: 10px;
			background-color: rgb(247, 247, 249);
			border-radius: 10px;

			view {
				margin: 8px 0;
			}

			.Service {
				// margin-top: 10px;
				display: flex;
			}

			.Number {
				font-size: 30px;
				margin-right: 5px;
			}

			.Word {
				font-size: 13px;
				font-weight: bolder;
				margin-right: 10px;
				color: grey;
			}

			.Descripton {
				margin: 12px 0;
				font-weight: bolder;
			}
		}

		.user_nav {

			background-color: #f8f8f8;

			.nav_header ul {
				display: flex;
				justify-content: space-between;
				width: 100%;
				background-color: #fff;

				li {
					padding: 0 4px;
					margin: 0 5px;
					line-height: 30px;
					text-align: center;
					color: #797a7b;
					list-style: none;
				}

				.active {
					color: #3c3c3d;
					border-bottom: 3px solid #1989fa;
				}
			}
		}

	}

	.result_no {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		padding-bottom: 10px;
		color: #b6b6b6;
		width: 100%;
		height: 200px;
		background: url('@/static/images/empty-image-default.png') no-repeat;
		background-size: 50%;
		background-position: 50% 50%;
	}
</style>
